<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SLIDESHOW SLIDE-IN</title>
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script src="../../lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="../../js/ss_slidein.js" type="text/javascript"></script>
<script src="../../js/rollover.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
//---ここではXMLを使わずJSONで指定します
var json = {
items:[
	{'url':'images/01.jpg','title':'01'},
	{'url':'images/02.jpg','title':'02'},
	{'url':'images/03.jpg','title':'03'},
	{'url':'images/04.jpg','title':'04'},
	{'url':'images/05.jpg','title':'05'},
	{'url':'images/06.jpg','title':'06'},
	{'url':'images/07.jpg','title':'07'}//最後カンマなし
]};
var slideObj;
Event.observe(window,'load',function() {
	var option = {imageId:"container"};
	slideObj = new Slidein(json,option); 
});
</script>
<style>
#container {
float:left;clear:none;
width:420px;height:280px;
background-color:black;
border:1px solid black;
}
#navbuttons {
clear:both;
padding:0;margin:0;
width:420px;height:32px;
background-color:black;
border:1px solid black;
}
#navbuttons div {
float:left;
color:#777;
padding:10px 0 0 10px;
font-size:12px;
font-family:sans-serif;
}
#navbuttons img {
border:0;
float:right;
margin-right:5px;
}
</style>
</head>
<body>

<div style="width:420px;margin:30px;">
<div id="container"></div>
<div id="navbuttons">
	<div>スライドイン・スライドショー</div>
	<a href="javascript:slideObj.nextSlide()"><img src="images/next.gif" class="imgover"/></a>
	<a href="javascript:slideObj.prevSlide()"><img src="images/prev.gif" class="imgover"/></a>
</div>
</div>

</body>
</html>
